import { Component, PropsWithChildren } from 'react'
import { View, Text, Input, Swiper, SwiperItem, Image, Button } from '@tarojs/components'
import { AtGrid, AtIcon, AtTag } from "taro-ui"
import './index.scss'
import Taro from '@tarojs/taro'
import { getHomeList, getBroker } from '../../api/home'
// import { getHomeData } from '../../api/home'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      goodList: [],
      brokerList: [],
      tagList: [{
        name: 'Top1',
        tit: '心悦尚城新房正在抢购心悦尚城新房正在抢购!'
      }, {
        name: 'Top2',
        tit: '心悦尚城新房正在抢购心悦尚城新房正在抢购!!'
      }, {
        name: 'Top3',
        tit: '心悦尚城新房正在抢购心悦尚城新房正在抢购!!'
      }, {
        name: 'Top4',
        tit: '心悦尚城新房正在抢购心悦尚城新房正在抢购!!'
      }],
      banner: [
        'https://www.bwie.net/statics/PCindex/images/index_banner1.jpg', 'https://www.bwie.net/statics/PCindex/images/index_banner2.jpg', 'https://www.bwie.net/statics/PCindex/images/index_banner3.jpg'
      ],
      keyword: '',
    }
  }
  getList() {
    getHomeList().then((res) => {
      console.log(res.data.data);
      this.setState({
        goodList: res.data.data
      })
    })
  }
  getbroker() {
    getBroker().then((res) => {
      this.setState({
        brokerList: res.data.data
      })
    })
  }
  handleInput(e) {
    const keyword = e.target.value
    this.setState({
      keyword
    })

    Taro.request({
      // url: 'http://example.com/search',
      url: 'http://localhost:3000/api/search',
      data: { keyword }
    }).then(res => {
      this.setState({
        // searchList: res.data
        goodList: res.data.data
      })
    })
  }
  componentWillMount() { }

  componentDidMount() {
    this.getList()
    this.getbroker()

  }

  componentWillUnmount() { }

  componentDidShow() {

  }

  componentDidHide() { }

  goMore() {
    Taro.navigateTo({
      url: '/pages/MorePages/index'
    })
  }
  goDetail() {
    Taro.navigateTo({
      url: '/pages/Detail/index'
    })
  }
  goDetail1() {
    Taro.navigateTo({
      url: '/pages/ResourceDetail/index'
    })
  }
  goBuyHouse() {
    Taro.navigateTo({
      url: '/pages/BuyHouse/index'
    })
  }
  goPush(index: number, value: number) {
    console.log(value)
    if (value === 0) {
      Taro.navigateTo({
        url: '/pages/BuyHouse/index'
      })
    } else if (value === 1) {
      Taro.navigateTo({
        url: '/pages/Tenement/index'
      })
    } else if (value === 2) {
      Taro.navigateTo({
        url: '/pages/Rent/index'
      })
    } else if (value === 3) {
      Taro.navigateTo({
        url: '/pages/toBuy/index'
      })
    } else if (value === 4) {
      Taro.navigateTo({
        url: '/pages/SearchHouse/index'
      })
    } else if (value === 5) {
      Taro.navigateTo({
        url: '/pages/MorePages/index'
      })
    } else if (value === 6) {
      Taro.navigateTo({
        url: '/pages/Market/index'
      })
    } else if (value === 7) {
      Taro.navigateTo({
        url: '/pages/Broker/index'
      })
    } else if (value === 8) {
      Taro.navigateTo({
        url: '/pages/GroupBuy/index'
      })
    } else if (value === 9) {
      Taro.navigateTo({
        url: '/pages/LiveBroadcast/index'
      })
    }

  }
  goBroker() {
    Taro.navigateTo({
      url: '/pages/Broker/index'
    })
  }
  goDetailBroker() {
    Taro.navigateTo({
      url: '/pages/BrokerDetail/index'
    })
  }
  goAddress() {
    Taro.navigateTo({
      url: '/pages/Region/index'
    })
  }
  render() {
    return (
      <View className='index' >
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <Text className='tit'>宏烨找房</Text>
          </View>
          <View className='input-box'>
            <Input className='inp' placeholder='请输入查询内容' value={this.state.keyword} onInput={this.handleInput.bind(this)} />
            <Text className='address' onClick={this.goAddress.bind(this)}>北京 ▼ |</Text>
            <AtIcon className='search' value='search' size='25' color='#fff'></AtIcon>
          </View>
        </View>
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          autoplay>
          {
            this.state.banner?.map((item: any, index: number) => {
              return <SwiperItem key={index}>
                <Image src={item} />
              </SwiperItem>
            })
          }
        </Swiper>
        <AtGrid className='grid' onClick={this.goPush.bind(this)} columnNum={5} hasBorder={false} data={
          [
            {
              image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
              value: '买房'
            },
            {
              image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
              value: '租房'
            },
            {
              image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
              value: '求租'
            },
            {
              image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
              value: '求购'
            },
            {
              image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
              value: '地图找房'
            },
            {
              image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
              value: '资讯'
            },
            {
              image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
              value: '楼市圈'
            },
            {
              image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
              value: '经纪人'
            },
            {
              image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
              value: '团购看房'
            },
            {
              image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
              value: '直播看房'
            }
          ]
        } />
        <View className='title'>
          楼市资讯
          <Text className='more' onClick={this.goMore.bind(this)}>更多</Text>
        </View>
        <View className='list'>
          {
            this.state.tagList?.map((item: any, index: number) => {
              return <View className='list1' key={index} onClick={this.goDetail.bind(this)}>
                <AtTag className='tag' type='primary'>{item.name}</AtTag>
                <View className='tit'>{item.tit}</View>
              </View>
            })
          }
        </View>
        <View className='title'>
          热门楼盘
          <Text className='more' onClick={this.goBuyHouse.bind(this)}>更多</Text>
        </View>
        {
          this.state.goodList?.map((item: any, index: number) => {
            return <View className='cardList' key={index} onClick={this.goDetail1.bind(this)}>
              <Image src={item.imgUrl} />
              <View className='mes'>
                <View className='tit'>{item.title}</View>
                <View>{item.address}</View>
                <View className='mian'>{item.price1}
                  <Text>{item.price2}</Text>
                </View>
                <View className='area'>{item.area}</View>
              </View>
            </View>
          })
        }

        <View className='title'>
          经纪人
          <Text className='more' onClick={this.goBroker.bind(this)}>更多</Text>
        </View>
        <View className='jingji'>
          {
            this.state.brokerList?.map((item: any, index: number) => {
              return <View className='box' key={index}>
                <Image src={item.img} />
                <View className='title'>{item.title}</View>
                <View className='des'>{item.note}</View>
                <Button onClick={this.goDetailBroker.bind(this)}>{item.talk}</Button>
              </View>
            })
          }
        </View>
        <View className='guo'>
          <Image src='https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394' />
        </View>
        <View className='title'>
          二手房
          <Text className='more' onClick={this.goBuyHouse.bind(this)}>更多</Text>
        </View>
        {
          this.state.goodList?.map((item: any, index: number) => {
            return <View className='cardList' key={index}  onClick={this.goDetail1.bind(this)}>
              <Image src={item.imgUrl} />
              <View className='mes'>
                <View className='tit'>{item.title}</View>
                <View>{item.address}</View>
                <View className='mian'>{item.price1}
                  <Text>{item.price2}</Text>
                </View>
                <View className='area'>{item.area}</View>
              </View>
            </View>
          })
        }
      </View>
    )
  }
}
